<%@ include file="includes/include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<jsp:include page="includes/admin_header.jsp">
  <jsp:param name="pageTitle" value="Add chapter" />
</jsp:include>

<script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/static/inittinymce.js"></script>

<script type="text/javascript">
  // Code provided by http://v3.thewatchmakerproject.com/journal/329/finding-html-elements-using-javascript-nextsibling-and-previoussibling
  Object.prototype.nextObject = function() {
    var n = this;

    do {
      n = n.nextSibling;
    }
    while (n && n.nodeType != 1);

    return n;
  }

  var gtugs = {
    count: 0
  };

  gtugs.addAdministratorRow = function() {
    var administratorsTable = document.getElementById('administratorsTable');
    var emailInputId = 'administrators[' + this.count + '].email';
    var nameInputId = 'administrators[' + this.count + '].name';

    var newRow = core.createElement('tr');
    var nameCell = core.createElement('td');
    var emailCell = core.createElement('td');
    var removeButtonCell = core.createElement('td');
    var nameInput = core.createElement('input', null,
        {id:nameInputId, name:nameInputId});
    var emailInput = core.createElement('input', null,
        {id:emailInputId, name:emailInputId});
    var removeButton = core.createElement('input', null,
        {type:'button', value:'Remove', onclick:function() {
          gtugs.removeAdministratorRow(this);
        }}, {width:'auto'});

    core.appendNode(nameInput, nameCell);
    core.appendNode(nameCell, newRow);
    core.appendNode(emailInput, emailCell);
    core.appendNode(emailCell, newRow);
    core.appendNode(removeButton, removeButtonCell);
    core.appendNode(removeButtonCell, newRow);
    core.appendNode(newRow, administratorsTable);
    this.count++;

    if (this.count == 2) {
      // First row has table headings -- second row has name and email inputs
      var firstRow = administratorsTable.getElementsByTagName('tr')[1];
      var inputs = firstRow.getElementsByTagName('input');
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'button') {
          inputs[i].disabled = null;
          break;
        }
      }
    }
  };

  gtugs.removeAdministratorRow = function(elmt) {
    var administratorsTable = document.getElementById('administratorsTable');
    var row = elmt.parentNode.parentNode;

    var nextRow = row.nextObject();
    while (nextRow) {
      var inputs = nextRow.getElementsByTagName('input');
      for (var i = 0; i < inputs.length; i++) {
        var match = inputs[i].name.match(/(administrators\[)(\d)(\].*$)/);
        if (match) {
          var newIndex = +(match[2]) - 1;
          inputs[i].id = match[1] + newIndex + match[3];
          inputs[i].name = match[1] + newIndex + match[3];
        }
      }
      nextRow = nextRow.nextObject();
    }

    administratorsTable.removeChild(row);
    this.count--;

    if (this.count == 1) {
      // First row has table headings -- second row has name and email inputs
      var firstRow = administratorsTable.getElementsByTagName('tr')[1];
      var inputs = firstRow.getElementsByTagName('input');
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'button') {
          inputs[i].disabled = 'disabled';
          break;
        }
      }
    }
  };

  var editor;
  window.onload = function() {
    var form = document.getElementById('chapter');
    var i = 0;

    do {
      var node = form['administrators[' + i + '].name'];
      i++;
    } while (node && i < 10);

    gtugs.count = --i;

    editor = tinyMCE.get('description');
  };
</script>

<div id="title">
  <h2 style="color:#333333">Add chapter</h2>
</div>

<form:form method="post" commandName="chapter" onsubmit="editor.getContent();">
  <div class="form-block">
    <span class="label">
      Name *
    </span>
    <form:input path="name"/>
    <span class="error">
      <form:errors path="name"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Type
    </span>
    <form:select path="type">
      <form:option value="gtug" label="GTUG"/>
      <form:option value="android" label="Android"/>
    </form:select>
    <span class="error">
      <form:errors path="type"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Status
    </span>
    <form:select path="status">
      <form:option value="incubating" label="Incubating"/>
      <form:option value="active" label="Active"/>
      <form:option value="inactive" label="Inactive"/>
    </form:select>
    <span class="error">
      <form:errors path="status"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      City
    </span>
    <form:input path="city"/>
    <span class="error">
      <form:errors path="city"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      State
    </span>
    <form:input path="state"/>
    <span class="error">
      <form:errors path="state"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Country
    </span>
    <form:select path="country" items="${model.countries}" itemLabel="name" itemValue="name" />
    <span class="error">
      <form:errors path="country"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Description
    </span>
    <div>
      <form:textarea path="description"/>
    </div>
    <span class="error">
      <form:errors path="description"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Website URL
    </span>
    <form:input path="website"/>
    <span class="error">
      <form:errors path="website"/>
    </span>
  </div>

  <%--<div class="form-block">
    <span class="label">
      Meetup.com Group URL Name
    </span>
    <form:input path="meetupGroupUrlName"/>
    <span class="error">
      <form:errors path="meetupGroupUrlName"/>
    </span>
  </div>--%>

  <div class="form-block">
    <span class="label">
      Mailing list
    </span>
    <form:input path="mailingList"/>
    <span class="error">
      <form:errors path="mailingList"/>
    </span>
  </div>

  <div class="form-block">
    <span class="label">
      Administrators *
    </span>
    <table cellpadding="0" cellspacing="0">
      <tbody id="administratorsTable">
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
        <c:forEach items="${chapter.administrators}" varStatus="row">
          <tr>
            <td>
              <form:input path="administrators[${row.index}].name"/>
              <span class="error">
                <form:errors path="administrators[${row.index}].name"/>            
              </span>
            </td>
            <td>
              <form:input path="administrators[${row.index}].email"/>
              <span class="error">
                <form:errors path="administrators[${row.index}].email"/>            
              </span>
            </td>
            <td>
              <c:choose>
                <c:when test="${row.index == 0 && row.last == true}">
                  <input type="button" value="Remove" onclick="gtugs.removeAdministratorRow(this)" style="width:auto" disabled="disabled"/>
                </c:when>
                <c:otherwise>
                  <input type="button" value="Remove" onclick="gtugs.removeAdministratorRow(this)" style="width:auto"/>
                </c:otherwise>
              </c:choose>
            </td>
          </tr>
        </c:forEach>
      </tbody>
    </table>
    <input type="button" value="Add administrator" onclick="gtugs.addAdministratorRow()" style="width:auto"/>
  </div>

  <input type="submit" align="center" value="Submit">
</form:form>

<%@ include file="includes/footer.jsp" %>